<template>
    <!-- 商品信息展示组件 -->
    <div class="top-panel">
        <el-card>
            <el-form :model="searchForm" label-width="70px" label-position="right">
                <el-row>
                    <el-col :span="2">
                        <el-form-item label="id" label-width="10px">
                            <el-input v-model="searchForm.id" clearable @keyup.enter="loadDataList">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="名称" label-width="50px">
                            <el-autocomplete v-model="searchForm.key" :fetch-suggestions="querySuggests"
                                placeholder="支持模糊搜索" clearable @keyup.enter="loadDataList"></el-autocomplete>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <el-form-item label="分类" label-width="50px">
                            <el-input v-model="searchForm.category" clearable @keyup.enter="loadDataList"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <el-form-item label="品牌" label-width="50px">
                            <el-input v-model="searchForm.brand" clearable @keyup.enter="loadDataList"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="最低价格(分)" label-width="100px">
                            <el-input v-model="searchForm.minPrice" clearable @keyup.enter="loadDataList"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="最高价格(分)" label-width="100px">
                            <el-input v-model="searchForm.maxPrice" clearable @keyup.enter="loadDataList"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2" :style="{ paddingLeft: '20px' }">
                        <el-button type="primary" @click="showEdit">新增商品</el-button>
                    </el-col>
                    <el-col :span="1" :style="{ paddingLeft: '20px' }"><el-button type="success"
                            @click="loadDataList()">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
    </div>
    <el-card class="table-data-card">
        <Table :columns="columns" :fetch="loadDataList" :dataSource="tableData" :options="tableOptions">
            <template #slotName="{ row }">
                <el-tooltip class="text-overflow" effect="dark">
                    <template #content>
                        <div v-html="row.highlightedName == null ? row.name : row.highlightedName"></div>
                    </template>
                    <span v-if="String(row.name).length < 6">
                        <div v-html="row.highlightedName == null ? row.name : row.highlightedName"></div>
                    </span>
                    <span v-else>{{ String(row.name).substring(0, 3) }} ...</span>
                </el-tooltip>
            </template>
            <template #slotImage="{ row }">
                <el-image :src="row.image" fit="scale-down" :width="30">
                    <template #error>
                        <div class="iconfont icon-shangpin"></div>
                    </template>
                </el-image>
            </template>
            <template #slotIsAD="{ row }">
                <div v-if="row.isAD" style="color: coral">是</div>
                <div v-else>否</div>
            </template>
            <template #slotStatus="{ row }">
                <div v-if="row.status == 1" style="color: blue;">上架中</div>
                <div v-if="row.status == 2" style="color: darkorange">已下架</div>
                <div v-if="row.status == 3" style="color: crimson">已删除</div>
            </template>
            <template #slotOperation="{ row }">
                <el-dropdown placement="bottom-end" trigger="click">
                    <span class="iconfont icon-caozuo"></span>
                    <template #dropdown>
                        <el-dropdown-item @click="showEdit(row)">编辑商品</el-dropdown-item>
                        <el-dropdown-item @click="changeStatus(row.id, 1)"
                            v-if="row.status != 1">上架商品</el-dropdown-item>
                        <el-dropdown-item @click="changeStatus(row.id, 2)"
                            v-if="row.status != 2">下架商品</el-dropdown-item>
                        <el-dropdown-item @click="changeStatus(row.id, 3)"
                            v-if="row.status == 2">删除商品</el-dropdown-item>
                    </template>
                </el-dropdown>
            </template>
        </Table>
    </el-card>
    <ItemEdit ref="itemEditRef" @reload="loadDataList"></ItemEdit>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, watch } from "vue"
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const querySuggests = async (queryString, cb) => {
    let result = await proxy.Request({
        url: proxy.Api.querySuggestion,
        params: {
            prefix: queryString
        }
    })
    if (!result) {
        return;
    }
    cb(result.data)
}

import ItemEdit from "./ItemEdit.vue";
const itemEditRef = ref(null)

const showEdit = (row) => {
    itemEditRef.value.show(Object.assign({}, row))
}

const changeStatus = async (id, status) => {
    let result = await proxy.Request({
        method: "put",
        url: proxy.Api.updateItemStatus + id + "/" + status,
    })
    if (!result) {
        return;
    }
    proxy.Message.success("操作成功")
    loadDataList()
}

const tableData = ref({
    pageNo: 1,
    pageSize: 15,
})
const tableOptions = {}
const searchForm = ref({})

const loadDataList = async () => {
    let params = {
        pageNo: tableData.value.pageNo,
        pageSize: tableData.value.pageSize
    }
    params = Object.assign(params, searchForm.value)
    let result = await proxy.Request({
        url: proxy.Api.queryItemByPage,
        params: params
    })
    if (!result) {
        return;
    }
    Object.assign(tableData.value, result.data)
    tableData.value.totalCount = result.data.total
}

const columns = [
    {
        label: 'id',
        prop: 'id',
        width: 130
    },
    {
        label: '图片',
        prop: 'image',
        scopedSlots: 'slotImage'
    },
    {
        label: '名称',
        prop: 'name',
        scopedSlots: 'slotName'
    },
    {
        label: '价格(分)',
        prop: 'price'
    },
    {
        label: '分类',
        prop: 'category',
    },
    {
        label: '品牌',
        prop: 'brand',
    },
    {
        label: '规格',
        prop: 'spec',
    },
    {
        label: '销量',
        prop: 'sold'
    },
    {
        label: '库存',
        prop: 'stock'
    },
    {
        label: '是否推广',
        prop: 'isAD',
        scopedSlots: 'slotIsAD'
    },
    {
        label: '商品状态',
        prop: 'status',
        scopedSlots: 'slotStatus'
    },
    {
        label: '创建时间',
        prop: 'createTime',
    },
    {
        label: '更新时间',
        prop: 'updateTime',
    },
    {
        label: '操作',
        prop: 'operation',
        width: 100,
        scopedSlots: 'slotOperation'
    },
]

</script>

<style lang="scss" scoped>
.text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
<style>
em {
    color: #f56c6c;
}
</style>
